<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        /* display: flex; */
        justify-content: center;
        align-items: center;
        display: none;
      }
      .dialog form {
        background-color: white;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <button data-action="add">添加</button>
    </div>
    <div id="error" style="color: red; padding: 10px"></div>
    <div id="box"></div>

    <div class="dialog" id="dialogAdd">
      <form name="formAdd">
        <fieldset>
          <legend>添加</legend>
          <p>姓名 <input value="jack" type="text" name="name" /></p>
          <p>邮箱 <input type="text" name="email" /></p>
          <p>存款 <input type="number" name="money" /></p>
          <p><input type="checkbox" name="marry" /> 已婚</p>
          <p>
            <button type="button" data-action="add_ok">确定</button>
            <button type="button" data-action="add_cancel">取消</button>
          </p>
        </fieldset>
      </form>
    </div>

    <div class="dialog" id="dialogEdit">
      <form name="formEdit">
        <fieldset>
          <legend>编辑</legend>
          <input type="text" name="id" hidden />
          <p>姓名 <input value="jack" type="text" name="name" /></p>
          <p>邮箱 <input type="text" name="email" /></p>
          <p>存款 <input type="number" name="money" /></p>
          <p><input type="checkbox" name="marry" /> 已婚</p>
          <p>
            <button type="button" data-action="edit_ok">确定</button>
            <button type="button" data-action="edit_cancel">取消</button>
          </p>
        </fieldset>
      </form>
    </div>

    <script type="module">
      import PocketBase from "./pocketbase.es.js";

      // 增删改查 curd
      function renderTable(data = []) {
        const html = String.raw;
        return html` <table border="1">
          <thead>
            <tr>
              <th>姓名</th>
              <th>邮箱</th>
              <th>婚姻</th>
              <th>存款</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            ${data
              .map(
                (el) => html` <tr>
                  <td>${el.name}</td>
                  <td>${el.email}</td>
                  <td>${el.marry ? "已婚" : "未婚"}</td>
                  <td>${el.money}</td>
                  <td>
                    <button data-action="edit" data-edit-id="${el.id}">
                      编辑
                    </button>
                    <button data-action="delete" data-delete-id="${el.id}">
                      X
                    </button>
                  </td>
                </tr>`
              )
              .join("")}
          </tbody>
        </table>`;
      }

      // 链接数据库
      const pb = new PocketBase("http://127.0.0.1:8090");

      async function getLists() {
        try {
          const data = await pb.collection("employ").getFullList();
          document.getElementById("box").innerHTML = renderTable(data);
        } catch (error) {}
      }
      getLists();

      // 添加
      const dialogAdd = document.getElementById("dialogAdd");
      // 编辑
      const dialogEdit = document.getElementById("dialogEdit");

      document.addEventListener("click", async (e) => {
        const action = e.target.dataset.action;
        if (action !== undefined) {
          // 编辑
          if (action === "edit") {
            dialogEdit.style.display = "flex";

            const id = e.target.dataset.editId;
            //回填数据
            try {
              const record = await pb.collection("employ").getOne(id);

              // 回填数据
              document.formEdit.name.value = record.name;
              document.formEdit.email.value = record.email;
              document.formEdit.money.value = record.money;
              document.formEdit.marry.checked = record.marry;
              document.formEdit.id.value = record.id;
            } catch (error) {}
          }
          //

          if (action === "edit_ok") {
            //收集数据
            // 收集表单数据
            const data = {};
            data.name = document.formEdit.name.value;
            data.email = document.formEdit.email.value;
            data.money = document.formEdit.money.value;
            data.marry = document.formAdd.marry.checked;
            //---
            const id = document.formEdit.id.value;
            //----
            try {
              await pb.collection("employ").update(id, data);
              getLists();
              dialogEdit.style.display = "";
            } catch (error) {}
          }

          //删除
          if (action === "delete") {
            if (confirm("确定删除？") === false) return;
            const id = e.target.dataset.deleteId;
            try {
              await pb.collection("employ").delete(id);
              getLists();
            } catch (error) {}
          }
          // 添加窗口
          if (action === "add") {
            dialogAdd.style.display = "flex";
            document.formAdd.reset(); //重置表单
          }

          // 取消添加
          if (action === "add_cancel") {
            dialogAdd.style.display = "";
          }

          // 取消编辑
          if (action === "edit_cancel") {
            dialogEdit.style.display = "";
          }

          // 添加数据
          if (action === "add_ok") {
            // 收集表单数据
            const data = {};
            data.name = document.formAdd.name.value;
            data.email = document.formAdd.email.value;
            data.money = document.formAdd.money.value;
            data.marry = document.formAdd.marry.checked;

            // 添加数据库
            try {
              await pb.collection("employ").create(data);
              getLists();
              dialogAdd.style.display = "";
            } catch (error) {}
          }
        }
      });
    
    </script>
  </body>
</html>
